<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-22 13:40:14
 * @LastEditors: chaixinyu
 * @LastEditTime: 2023-01-15 16:47:34
-->
<template>

  <div class="course-info">
    
    <!-- 课程名 -->
    <van-nav-bar
      class="nav-bar"
      :title="courseTitle"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <!-- 搜索框 -->
    <van-search v-model="value" shape="round" placeholder="搜索" />

    <!-- 分类栏 -->
    <van-tabs v-model:active="activeName" @click-tab="onClickTab" class="course-tabs">
      <van-tab title="任务" name="/courseinfo/coursetask"></van-tab>
      <van-tab title="章节" name="/courseinfo/coursesection"></van-tab>
      <van-tab title="更多" name="/courseinfo/coursemore"></van-tab>
    </van-tabs>

    <router-view></router-view>
  </div>


</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';


// 引入vant
import { NavBar, showToast, Search,Tab, Tabs } from 'vant';
// 引入路由
import {useRouter,useRoute} from 'vue-router'

// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';

// 实例化仓库对象
const course = useCourseStore()

// 解构 数据
const {courseTitle} = storeToRefs(course)

// 创建路由对象
const router = useRouter()
const route = useRoute()


// 搜索框
const value = ref('')

// 分类栏
const activeName = ref(route.path);

// 点击左侧箭头返回上一页
const onClickLeft = () => {
  router.push('/mycourse')
}

// 点击➕弹出
const onClickRight = () => {};

// 点击切换路由
const onClickTab = ({ title }) => {
  let location = activeName.value
  router.push(location)
};

</script>

<style lang="less" scoped>

.course-info {
  overflow: hidden;
  // background-color: #f4f5f7;

  :deep(.van-icon) {
    color: black;
  }

  :deep(.van-nav-bar){
    width: 100%;
    position: fixed;
    
    

    // .van-nav-bar__title {
    //   font-family: "楷体";
    //   font-weight: 600;
    // }
    
    :deep(.van-nav-bar__text){
      // font-family: "Calibri";
      font-size: 13px;
      font-weight: 500;
      color: rgb(79, 185, 253) ;
    }
  }

  :deep(.van-search){
    margin-top: 46px;
    background-color: #ffffff;

    :deep(.van-search__content) {
    background-color: #f5f6f8;
    }
    
  }

  :deep(.van-search__content){
    background-color: #f4f5f7;
    font-family: "楷体";
  }

  :deep(.van-tabs__nav--line){
    background-color: #f5f6f8;
  }
}

</style>

